<script setup>
import { ref } from 'vue'

const eventName = ref('click')
const currentEventName = ref('')

const onDynamicBindTextClick = (evt) => {
    currentEventName.value = evt.type
}

const onDynamicBindDBLClick = () => {
    eventName.value = 'dblclick'
    currentEventName.value = ''
}

const onDynamicBindClick = () => {
    eventName.value = 'click'
    currentEventName.value = ''
}
</script>

<template>
    <div class="home-wrapper">
        <div class="test-container">
            <div style="margin-bottom: 8px;color: blue;">问题：测试动态绑定事件是否自动解绑上一次的事件？</div>
            <div v-on:[eventName]="onDynamicBindTextClick">测试：点击/双击本段文字展示绑定事件的类型：{{ currentEventName }}，下面按钮可以切换绑定时间类型。</div>
            <el-button type="primary" @click.stop="onDynamicBindClick">绑定文字单击</el-button>
            <el-button type="primary" @click.prevent="onDynamicBindDBLClick">绑定文字双击</el-button>
            <div style="margin-top: 8px;color: red;">结论：动态绑定事件会自动解绑上一次的事件</div>
        </div>
    </div>
</template>

<style scoped>
.home-wrapper {
    height: 100%;
    padding: 16px;
}

.test-container {
    border: 1px solid #ccc;
    padding: 8px;
}
</style>